<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import type { ComponentSize } from 'element-plus'
import { userInfoStore } from '../assets/userStore/userStore';
import { TakeoutModel } from '../assets/models/Takeout';
import { managerApis } from '../assets/apis/ManagerApis';


const fill = ref<boolean>(true);// 定义一个响应式布尔值用于控制布局填充
const size = ref<ComponentSize>('default');// 定义一个响应式变量，用于控制组件尺寸，初始化为'default'
const takeouts = ref<Array<TakeoutModel>>([]);//定义变量，进行初始化
const userStore = userInfoStore();
let isEmpty = ref<boolean>(true);// 定义一个响应式布尔值，用于判断是否有待审核的外卖
onMounted(() => {
    managerApis.queryAuditingTakeoutList(userStore.id)
        .then((value) => {
            takeouts.value = value;
            isEmpty.value = value.length === 0 ? true : false;
        })
})

// 同意外卖申请的函数
const authTakeoutClick = (tid: number) => {
    managerApis.auditedTakeout(userStore.id, tid, 1)
        .then((value: boolean) => {
            if (value) {
                // 如果更新成功，重新查询待审核外卖列表并更新界面
                managerApis.queryAuditingTakeoutList(userStore.id)
                    .then((value) => {
                        takeouts.value = value;
                        isEmpty.value = value.length === 0 ? true : false;
                    })
            }
        })
}

//驳回外卖申请函数
const refuseTakeoutClick = (tid: number) => {
    managerApis.auditedTakeout(userStore.id, tid, 4)
        .then(() => {//更新界面
            managerApis.queryAuditingTakeoutList(userStore.id)
                .then((value) => {
                    takeouts.value = value;
                    isEmpty.value = value.length === 0 ? true : false;
                })
        })
}
</script>

<template>
    <!-- 使用el-scrollbar组件实现滚动条功能 -->
    <el-scrollbar height="100%" style="overflow-y: hidden;">
        <!-- 控制布局 -->
        <el-space wrap :size="size" :fill="fill" v-show="!isEmpty" style="width: 100%;">
            <!-- 为外卖申请创建一个卡片 -->
            <div v-for="i in takeouts" :key="i.id">
                <el-card shadow="hover" style="height: auto;">
                    <!-- 创建布局 -->
                    <el-row style="width: 100%;" align="middel">
                        <el-col :span="4">
                            <el-image :src="`${i.takeout_portrait}`"></el-image>
                        </el-col>
                        <el-col :span="16">
                            <el-row>
                                <el-col :span="24">
                                    <!-- 显示外卖申请详细情形 -->
                                    <el-text style="font-size: large;font-weight: bold;">
                                        {{ i.takeout_name }}
                                    </el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-text>
                                        申请ID：{{ i.id }}
                                    </el-text>
                                </el-col>
                                <el-col :span="24" style="margin-top: 1%;">
                                    <el-text>
                                        外卖描述：{{ i.introduce }}
                                    </el-text>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="4">
                            <!-- 统一申请和驳回申请两种按钮 -->
                            <el-row>
                                <el-col :span="24">
                                    <el-button type="danger" plain style="width: 100%;padding: 3%;"
                                        @click="refuseTakeoutClick(i.id!)">驳回申请</el-button>
                                </el-col>
                                <el-col :span="24" style="margin-top: 10%;">
                                    <el-button type="success" plain style="width: 100%;padding: 3%;"
                                        @click="authTakeoutClick(i.id!)">同意申请</el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
        <!-- 如果没有待审核的外卖，显示一个空的提示信息 -->
        <el-empty v-show="isEmpty" style="width: 100%;height: 100%;" description="这里还没有待审核的外卖哦" />
    </el-scrollbar>
</template>
